<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div{font-size:20px;}

.box1 {
  width:100px;
  height:100px;
  background:green;
}
.box2 {
  width:200px;
  height:200px;
  background:blue;
}
.box3 {
  width:300px;
  height:100px;
  background:red;
}
</style>
</head>

<body>
  <div class="box1">div1</div>
  <div class="box2">div2</div>
  <span class="box3">333333333333333333333333333333</span>
  <br><br><br><hr>
1.将    position:absolute;  加给box1或box2或box3<br>
  >>>>元素完全脱离文档流，原来的位置将由其他元素占有，但会被定位元素遮挡
  >>>>使内嵌支持设置宽度、高度<br><br>
2.将    position:absolute;top:0;left:0;   加给box1或box2或box3<br>
  >>>>绝对定位是基于整个html文档流发生定位偏移，而不是body（body + margin = html）  <br><br>
3.将    position:absolute; z-index:2         <br>
  和    position:absolute; z-index:1         <br>
  加给box1和box2<br>
  >>>>数值越大，层级越高
</body>
</html>
